<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图像追踪</title>
  <script src="/js/aframe-master.min.js"></script>
  <script src="/js/aframe-ar-nft.js"></script>
  <!-- <script src="/js/gestures.js"></script> -->
  <script src="https://cdn.bootcss.com/eruda/1.5.8/eruda.min.js"></script>
  <script>
    eruda.init();
    console.log('控制台打印信息');
  </script>
  <style>
    /*加载过程中蒙罩的css*/
    .arjs-loader {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .arjs-loader div {
      text-align: center;
      font-size: 1.25em;
      color: white;
    }
  </style>
</head>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>加载中...</div>
  </div>
  <a-scene vr-mode-ui="enabled: false;" renderer="logarithmicDepthBuffer: true;" embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
    <!-- a-nft是定义图像跟踪实体的锚点 -->
    <a-nft type="nft" url="feature/mubiao/mubiao" smooth="true" smoothCount="10" smoothTolerance=".01"
      smoothThreshold="5">
      <!-- 展示模型的路径 -->
      <a-entity gltf-model="model/mubiao/scene.gltf" scale="5000 5000 5000"
        gesture-handler="minScale: 0.25; maxScale: 10" position="50 0 -200" rotation="0 0 0" animation-mixer>
      </a-entity>
    </a-nft>
    <!-- 动态摄像机 -->
    <a-entity camera></a-entity>
  </a-scene>
</body>

</html>


<script>
  // 注册markerhandler组件
  // 该组件中注册了，当场景中检测到图像时触发的事件
  // AFRAME.registerComponent('markerhandler', {
  //   init: function () {
  //     this.el.sceneEl.addEventListener('markerFound', () => {
  //       alert('识别成功!')
  //     });
  //   }
  // });
  // window.addEventListener("arjs-nft-loaded", (event) => {
  //   // Hide loading overlay
  //   // 当所有 NFT 标记都完成加载时，该事件将被触发。这时你就可以开始用相机跟踪你的NFT标记了。
  // });
</script>